<!--
 * @Author: Bennent_G
 * @Date: 2024-12-23 16:14:13
 * @LastEditTime: 2025-03-27 10:33:00
 * @Description:
-->
<template>
	<el-header class="sub-header">
		<!-- <el-tag color="geekblue" v-for="item in menuTabCache" :key="item" @click="handleClickTag(item)"
			:class="{ 'tag-active': item.path === currentRoute.path }" closable @close="handleCloseTag(item)">
			{{ item?.label || item?.title }}
		</el-tag> -->
		<template v-for="(item, index) in visibleTags" :key="index">
			<el-tag @click="handleClickTag(item)" :class="{ 'tag-active': item.path === currentRoute.path }" closable
				@close="handleCloseTag(item)">
				{{ item?.label || item?.title }}
			</el-tag>
		</template>
		<el-dropdown v-if="hiddenTags.length > 0">
			<el-tag type="info" class="more-tag">
				更多
				<el-icon>
					<ArrowDown />
				</el-icon>
			</el-tag>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item v-for="item in hiddenTags" :key="item" @click="handleClickTag(item)">
						{{ item?.label || item?.title }}
					</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</el-header>
</template>

<script setup lang="ts">
import { defineComponent, computed } from 'vue';
import { useRouter } from "vue-router";
import { ArrowDown } from '@element-plus/icons-vue';
import { storeToRefs } from "pinia";
import { useMenuStore } from "@/stores";
import useRouteHook from '@/hooks/admin/useRouteHook';

interface Menu {
	[key: string]: any;
}

defineComponent({ name: "BaseLayoutSubHeader" });

const menuStore = useMenuStore();
const { menuTabCache } = storeToRefs(menuStore);
const { removeMenuCache } = menuStore;

// 最大可见标签数量
const MAX_VISIBLE_TAGS = 12; 
// 计算可见和隐藏的标签
const visibleTags = computed(() => {
	return menuTabCache.value.slice(0, MAX_VISIBLE_TAGS);
});
const hiddenTags = computed(() => {
	return menuTabCache.value.slice(MAX_VISIBLE_TAGS);
});

// 类tab切换
const router = useRouter();
const { currentRoute } = useRouteHook();
const handleClickTag = (item: Menu) => {
	router.push(item.path);
};
const handleCloseTag = (item: Menu) => {
	if (item.path === currentRoute.value.path) {
		const prevMenu = menuTabCache.value[menuTabCache.value.length - 2];
		router.push(`${prevMenu?.path || '/admin/welcome'}`);
	}
	removeMenuCache(item);
};
</script>

<style scoped lang="scss">
.sub-header {
	height: 40px;
	border-top: 1px solid var(--el-border-color-light);
	border-bottom: 1px solid var(--el-border-color-light);
	display: flex;
	align-items: flex-end;
	padding-inline: 12px;

	.el-tag {
		height: 28px;
		cursor: pointer;
		margin-right: 4px;
		transition: all 0.3s ease;
		background-color: var(--el-fill-color-lighter);
		border-color: var(--el-border-color);

		&:hover {
			background-color: var(--el-color-primary-light-9);
			border-color: var(--el-color-primary-light-7);
		}

		&.tag-active {
			background-color: var(--el-color-primary-light-9);
			border-color: var(--el-color-primary-light-7);
			color: var(--el-color-primary);
		}
	}

	.tag-active {}

}
</style>
